<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <div class="empty db" v-show="emptyShow">
        <div class="flexs">
          <van-empty
            class="custom-image"
            :image="require('../../assets/images/none.png')"
            :description="$t('load.doc1')"
          />
        </div>
      </div>

      <van-pull-refresh
        v-model="refreshing"
        :success-text="$t('load.refreshed')"
        @refresh="onRefresh(0)"
        head-height="100"
        v-if="!emptyShow"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('load.no_more')"
          :loading-text="$t('load.loading')"
          @load="onLoad"
          :immediate-check="check"
        >
          <!-- <ul class="list">
            <li @click="path_url('/information/view',item)" v-for="(item,k) in datalist" :key="k">
              <div class="n">{{item.title}}</div>
              <div class="time">{{item.date}}</div>
            </li>
          </ul> -->

          <ul class="list">
            <li
              class="wrap bet"
              @click="path_url('/information/view', item)"
              v-for="(item, k) in datalist"
              :key="k"
            >
              <div class="title">
                <div class="pic">
                  <img src="../../assets/images/Group13.png" alt="" />
                  <div class="name">{{ item.title }}</div>
                </div>
                <div class="time">{{ item.date }}</div>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.$t("title.doc35"),
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
    };
  },

  mounted() {},
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getinfo();
      }, 100);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getinfo() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }
      this.$post(this.URL.member.message_list, {
        groupKey: this.$route.query.type,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true;
          } else {
            this.emptyShow = false;
          }

          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },
    path_url(url, item) {
      this.$router.push({
        path: url,
        query: {
          time: item.date,
          title: item.title,
          doc: item.richText,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-radius {
  background: #2a292f;
  border-radius: 0.24rem;
}

.list {
  margin-top: 0.32rem;
  padding: 0.12rem 0.32rem;
  background: var(--CObackgroundLinear2);
  margin-bottom: 0.2rem;
  border-radius: 0.24rem;

  li {
    border-bottom: var(--COborder3);
    padding: 0.28rem 0rem 0.26rem 0rem;
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 0.36rem;

    .title {
      .pic {
        margin-bottom: 0.16rem;
        display: flex;
        align-items: center;

        img {
          margin-right: 0.16rem;
          height: 0.48rem;
        }

        .name {
          font-size: 0.32rem;
          font-weight: 500;
          color: var(--COcolor3);
          padding-right: 0.2rem;
        }
      }

      .time {
        color: var(--COcolor1);
        margin-left: 0.64rem;
      }
    }

    &:last-child {
      border: 0;
    }
  }
}

// .list {
//   padding-top: .6rem;
//   li {
//     background: #2a292f;
//     border-radius: .24rem;
//     margin-bottom: .4rem;
//     padding: .36rem;
//     .n {
//       font-size: .3rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.90);
//       line-height: .42rem;
//       margin-bottom: .2rem;
//     }
//     .time {
//       font-size: .26rem;
//       font-weight: 400;
//       color: rgba(255,255,255,0.50);
//       line-height: .36rem;
//       span {
//         margin-left: .16rem;
//         display: inline-block;
//         width: .18rem;
//         height: .18rem;
//         background: #cda349;
//         border-radius: 50%;
//       }
//     }
//   }
// }
</style>
